<template>
	<div>
		<transition name="msgbox-fade">
			<div class="mask" @click.self="handleClose" v-if="isVisible">
				<div class="el-message-box">
					<div class="el-message-header">
						<div class="title">{{ title }}</div>
						<i
							class="el-icon-close el-message-box__headerbtn"
							@click="handleAction('cancel')"
						></i>
					</div>
					<div class="box_content">
						<div class="el-message-box__container">
							<div class="el-message-box__status el-icon-warning"></div>
							<div class="el-message-box__message">
								<p>{{ message }}</p>
							</div>
						</div>
					</div>
					<footer class="box_btns">
						<el-button @click="handleAction('cancel')">{{
							cancelButtonText
						}}</el-button>
						<el-button @click="handleAction('confirm')">
							{{ confirmButtonText }}</el-button
						>
						<!-- type="primary" -->
						<el-button v-if="threesButtonText" @click="handleAction('three')">{{
							threesButtonText
						}}</el-button>
					</footer>
				</div>
			</div>
		</transition>
		<div class="mask_wrap" v-if="isVisible"></div>
	</div>
</template>

<script>
	export default {
		name: "Confirm",
		data() {
			return {
				message: undefined,
				title: undefined,
				isVisible: false,
				confirmButtonText: "确认",
				cancelButtonText: "取消",
				threesButtonText: null,
				focusAfterClosed: null,
				reject: "",
				resolve: "",
				type: "warning",
			};
		},
		watch: {
			isVisible(val) {
				if (val) {
					let body = document.querySelector("body");
					body.classList.add("body_hidden");
				} else {
					let body = document.querySelector("body");
					body.classList.remove("body_hidden");
				}
			},
		},
		methods: {
			handleAction(action) {
				if (action === "cancel") {
					this.handleClose();
					this.reject();
				} else if (action === "confirm") {
					this.handleClose();
					this.resolve(1);
				} else if (action === "three") {
					this.handleClose();
					this.resolve(2);
				}
			},
			handleClose() {
				this.isVisible = false;
				this.$nextTick(() => {
					this.$destroy(true);
					this.$el.parentNode.removeChild(this.$el);
				});
			},
		},
	};
</script>

<style  scoped>
.mask_wrap {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	opacity: 0.5;
	overflow: hidden;
	background: #000;
	z-index: 2000;
}
.mask {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 2006;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.el-message-box {
	width: 420px;
	padding-bottom: 10px;
	vertical-align: middle;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #ebeef5;
	font-size: 18px;
	box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2007;
	transform: translate(-50%, -50%);
}
.el-message-box {
	display: inline-block;
	width: 420px;
	padding-bottom: 10px;
	vertical-align: middle;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #ebeef5;
	font-size: 18px;
	-webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
	box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
	text-align: left;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.el-message-header {
	position: relative;
	padding: 15px 15px 10px;
}
.el-message-header > .title {
	padding-left: 0;
	margin-bottom: 0;
	font-size: 18px;
	line-height: 1;
	color: #303133;
}
.el-message-header > .el-message-box__headerbtn {
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 0;
	border: none;
	outline: 0;
	background: 0 0;
	font-size: 16px;
	cursor: pointer;
}

.box_content {
	padding: 10px 15px;
	color: #606266;
	font-size: 14px;
}
.box_content > .el-message-box__container {
	position: relative;
}
.el-message-box__status .el-icon-warning {
	color: #e6a23c;
}
.el-message-box__status {
	font-size: 22px !important;
}
.el-message-box__message {
	padding-left: 30px;
}
.el-message-box__message p {
	line-height: 24px;
	margin: 0;
}
.box_btns {
	padding: 5px 15px 0;
	text-align: right;
}
</style>
